import { useState, useRef, useEffect } from "react";
import "./App.css";
import _ from "lodash";
import classNames from "classnames";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
import userIcon from "./assets/images/icon-user.png";
import axios from "axios";
// 列表渲染

let user = {
  uid: "132581654",
  uname: "邓磊",
};

const tabList = [
  {
    name: "最新",
    id: 0,
  },
  {
    name: "最热",
    id: 1,
  },
];

// 自定义hooks
function useGetList() {
  let [commentList, setCommentList] = useState([]);

  useEffect(() => {
    async function getList() {
      const res = await axios.get("http://localhost:3004/list");
      setCommentList(res.data);
    }
    getList();
  }, []);

  return {
    commentList,
    setCommentList,
  };
}
function Item({ item, onDel }) {
  return (
    <div className="reply-item">
      <div className="user-info">
        <img className="icon-avatar" src={item.user.avatar} alt="" />
        <div className="reply-username">{item.user.uname}</div>
      </div>
      <div className="reply-content">{item.content}</div>
      <div className="reply-footer">
        <div className="reply-tip">{item.time}</div>
        <div className="reply-tip">点赞数：{item.like}</div>
        {user.uid === item.user.uid && (
          <div className="reply-action" onClick={() => onDel(item.rpid)}>
            删除
          </div>
        )}
      </div>
    </div>
  );
}

function App() {
  const { commentList, setCommentList } = useGetList();
  let [content, setContent] = useState("");

  const handleDelete = (id) => {
    setCommentList(commentList.filter((item) => item.rpid !== id));
  };

  let [curType, setCurType] = useState(0);
  let inputRef = useRef(null);

  const handleChangeTab = (id) => {
    console.log("id", id);
    setCurType(id);
    if (id === 0) {
      setCommentList(_.orderBy(commentList, "time", "desc"));
    } else {
      setCommentList(_.orderBy(commentList, "like", "desc"));
    }
  };
  // 发布
  const handlePublish = () => {
    setCommentList([
      ...commentList,
      {
        rpid: uuidV4(),
        user: {
          uid: "13258165",
          avatar:
            "https://ts1.tc.mm.bing.net/th/id/R-C.f925b6671e1dd7c2171b71aa7a868162?rik=Jvz1OIt29KCaNA&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2019%2f09%2f31475-6.jpg&ehk=2ojlLH21omrJd%2bECRhCtsH7vxk5K%2fVV26%2fJoUEcDmFw%3d&risl=&pid=ImgRaw&r=0",
          uname: "周杰伦",
        },
        content: content,
        time: dayjs(new Date()).format("YYYY-MM-DD hh:mm:ss"),
        like: 100,
      },
    ]);

    setContent("");
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <div className="reply-header">
        <div className="reply-prefix-title">
          评论 <span className="reply-count">{commentList.length}</span>
        </div>
        <div className="md-tab-list">
          {tabList.map((item) => (
            <div
              key={item.id}
              className={classNames("md-tab-item", {
                "md-tab-active": curType === item.id,
              })}
              onClick={() => handleChangeTab(item.id)}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>
      <div className="reply-submit-form">
        <img src={userIcon} alt="" />
        <input
          className="md-input-wrap"
          type="text"
          ref={inputRef}
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="发一条友善的评论"
        />
        <button className="md-action-btn" type="button" onClick={handlePublish}>
          发布
        </button>
      </div>
      {/* 列表渲染 */}
      <div className="reply-list">
        {commentList.map((item) => (
          <Item key={item.rpid} item={item} onDel={handleDelete}></Item>
        ))}
      </div>
    </div>
  );
}

export default App;
